<template>
	<div class="lm-chatgpt-footer">
		<!-- <div class="scoll-to-bottom">
			<svg-icon icon-class="return-to-latest"></svg-icon>
			<span>回到底部</span>
		</div> -->
		<div class="ope-bar-wrap">
			<!--常规操作-->
			<div class="custom-entry">
				<expand-button
					v-for="(item, index) of customEntryList" :key="index"
					:item="item"></expand-button>
			</div>
			<!--业务操作-->
			<div class="business-entry">
				<h-button
					v-for="(item, index) of businessEntryList" :key="index"
					v-show="((canShowIndex - fixedNumber - index) >= 0)"
					class="business-entry-item"
					@click="item.func(item)">{{item.text}}</h-button>
			</div>
			<!--更多按钮-->
			<div v-show="expandItem.children.length" class="more-box">
				<expand-button :item="expandItem" position="right"></expand-button>
			</div>
		</div>
		<!--问题发送框-->
		<div class="footer-send-wrap">
			<h-button class="clear-screen" @click="clearScreen">
				<svg-icon icon-class="clear-gray"></svg-icon>
			</h-button>
			<div class="chatgpt-footer-send">
				<h-input
					v-model.trim="inputValue"
					class="footer-send-input"
					type="textarea"
					:autosize="{ minRows: 1, maxRows: 1 }"
					placeholder="有问题尽管问我哦～"
					@on-enter="getAdviceInstruction(null)"></h-input>
				<svg-icon v-show="!inputValue" icon-class="sender" class="sender-svg"></svg-icon>
				<svg-icon v-show="inputValue" icon-class="sender-active" class="sender-svg" @svgEvent="getAdviceInstruction(null)"></svg-icon>
			</div>
		</div>
	</div>
</template>

<script>
import ExpandButton from '@/components/common/expand-button'
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'LmChatgptFooter',
	props: {
		isPreview: {
			type: Boolean,
			default: false
		}
	},
	components: {
		ExpandButton
	},
	data() {
		return {
			inputValue:'',
			// 常规操作入口列表
			customEntryList: [
				{
					width: 74,
					text: '客户画像',
					func: this.clickPortrait
				},
				{
					width: 74,
					text: '工作任务',
					children: [
						{
							text: '待办创建',
							func: this.clickGeneralOpe,
							bodyType: 'ordinaryTaskCreate'
						},
						{
							text: '定时任务',
							func: this.clickGeneralOpe,
							bodyType: 'scheduledTaskCreate'
						},
						{
							text: '任务安排',
							func: this.clickGeneralOpe,
							bodyType: 'ordinaryTaskManage'
						}
					]
				},
				{
					width: 74,
					text: '名片推送',
					sendText: '名片',
					func: this.clickGeneralOpe,
					bodyType: 'callingCard'
				},
				{
					width: 74,
					text: '对话总结',
					children: [
						{
							text: '本次总结',
							func: this.clickGeneralOpe,
							bodyType: 'summaryThis'
						},
						{
							text: '历史总结',
							func: this.clickGeneralOpe,
							bodyType: 'summaryHistory'
						}
					]
				},
				{
					width: 74,
					text: '业绩查询',
					instruction_id: '5',
					func: this.getAdviceInstruction
				},
				{
					width: 86,
					text: '活动量管理',
					instruction_id: '6',
					func: this.getAdviceInstruction
				},
			],
			// 业务操作入口列表
			businessEntryList: [
				{
					width: 74,
					text: '推荐产品',
					instruction_id: '1',
					func: this.getAdviceInstruction
				},
				{
					width: 86,
					text: '制作建议书',
					instruction_id: '2',
					func: this.getAdviceInstruction
				},
				{
					width: 74,
					text: '产品费率',
					instruction_id: '4',
					func: this.getAdviceInstruction
				},
				{
					width: 74,
					text: '快速出单',
					instruction_id: '3',
					func: this.getAdviceInstruction
				},
				{
					width: 74,
					text: '产品比对',
					instruction_id: '7',
					func: this.getAdviceInstruction
				}
			],
			fixedNumber: 6 // 固定显示的按钮数量
		}
	},
	computed: {
		...mapState('lm-chat', ['currentSessionInfo', 'currentClientId', 'lmPanelWidth']),
		expandItem() {
			return {
				svg: 'more',
				children: this.businessEntryList.filter((u, index) => {
					return index > this.canShowIndex - this.fixedNumber
				})
			}
		},
		// 按钮的总宽度
		btnsWidthList() {
			let widthList = []
			widthList = widthList.concat(this.customEntryList.map(u => u.width))
			widthList = widthList.concat(this.businessEntryList.map(u => u.width))
			return widthList
		},
		// 能够显示的按钮索引
		canShowIndex(){
			if(this.isPreview) {
				return 4
			}
			let showIndex = 0
			let allBtnsWidth = 0
			for(let i = 0; i < this.btnsWidthList.length; i++) {
				allBtnsWidth += this.btnsWidthList[i] + 10
				if(allBtnsWidth >= this.lmPanelWidth - 88) {
					showIndex = i - 1
					break
				} else if(i === this.btnsWidthList.length - 1) {
					showIndex = i
				}
			}
			return showIndex
		}
	},
	methods: {
		...mapMutations('lm-chat', ['pushGptMessageList', 'setGptMessageList', 'setPortraitInfo']),
		...mapActions('lm-chat', ['postGptMsg']),
		// 获取建议(代理人大模型对话发送消息接口)
		getAdviceInstruction(item) {
			if(this.isPreview) return
			let params = {}
			if(item && item.instruction_id) {
				params.instruction_id = item.instruction_id
				params.instruction_name = item.text
			} else {
				params.quote_msg_content = this.inputValue
				this.inputValue = ''
			}
			this.postGptMsg(params)
		},
		clearScreen() {
			this.$hMsgBox.confirm({
				title: "确定要删除记录吗？",
				content: "",
				onOk: () => {
					this.$usePost(this.$url.deleteLLMMessage, {
						session_id: this.currentSessionInfo.session_id
					}).then(res => {
						this.setGptMessageList([])
					})
				}
			})
		},
		// 点击其它通用
		clickGeneralOpe(item) {
			let msgItem = {
				message: {
					content: item.sendText || item.text
				},
				message_type: '3'
			}
			this.pushGptMessageList(msgItem)
			msgItem = {
				message_body_type: item.bodyType,
				message_type: '4'
			}
			this.pushGptMessageList(msgItem)
		},
		// 点击客户画像
		async clickPortrait() {
			let msgItem = {
				message: {
					content: '客户画像'
				},
				message_type: '3'
			}
			this.pushGptMessageList(msgItem)
			Promise.all([this.$usePost(this.$url.queryTagByUserId, {
					user_id: this.currentClientId,
					session_id: this.currentSessionInfo.session_id
				}), this.$usePost(this.$url.queryUserIntentionCustom, {
					user_id: this.currentClientId
				}), this.$usePost(this.$url.queryUserIntentionHistory, {
					user_id: this.currentClientId
				})]).then((values) => {
					let tagArray = values[0].data
					let intentionArray = values[1].data
					let historyIntentionArray = values[2].data
					msgItem = {
						message_body_type: "portrait",
						message_type: '4',
						message: {
							sesstionTag: tagArray,
							intentionArray: intentionArray,
							historyIntentionArray: historyIntentionArray
						}
					}
					this.setPortraitInfo({
						sesstionTag: tagArray,
						intentionArray: intentionArray,
						historyIntentionArray: historyIntentionArray
					})
					this.pushGptMessageList(msgItem)
				}).catch((error) => {
					// 如果任何一个 Promise 失败，这个 catch 会被调用
					console.log(error);
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.lm-chatgpt-footer{
	margin: 16px 20px 0;
  position: relative;
	.scoll-to-bottom{
		display: flex;
		align-items: center;
		cursor: pointer;
    position: absolute;
    right: 0;
    top: -40px;
    border-radius: 16px;
    padding: 0 8px;
    height: 28px;
    background-image: linear-gradient(227deg,#789ccb,#43639b);
    box-shadow: inset 0 -1px 2px 0 rgba(149,184,231,.58);
    color: #fff;
	}
	.ope-bar-wrap{
		display: flex;
		position: relative;
		.custom-entry{
			display: flex;
		}
		.business-entry{
			display: flex;
			.business-entry-item{
				background: #F7F7F7;
				border-color:  #F7F7F7;
				border-radius: 4px;
				margin-left: 10px;
				&:hover{
					color:#4686F2;
				}
			}
		}
		.more-box{
			position: absolute;
			right: 0px;
			width: 28px;
			height: 28px;
			background: #F7F7F7;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20px;
			/deep/ .entry-expand{
				bottom: 30px;
				right: -14px !important;
			}
		}
	}
	
	.footer-send-wrap{
		display: flex;
		margin-top: 10px;
		align-items: center;
		.clear-screen{
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F7F7F7;
			border-radius: 100%;
			margin-right: 16px;
			.clear{
				flex-shrink: 0;
				width: 14px;
			}
		}
		.chatgpt-footer-send{
			padding: 5px 16px;
			width: 100%;
			display: inline-flex;
			vertical-align: middle;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px 0px rgba(203,224,255,0.54);
			border-radius: 4px;
			align-items: center;
			.footer-send-input{
				flex: 1;
				/deep/ .h-input{
					border: 0;
					outline: none;
					background: transparent;
					resize: none;
					&:focus{
						border: 0;
						outline: none;
						box-shadow: none;
					}
				}
			}
			.sender-svg{
				width: 16px;
				height: 16px;
			}
		}
	}
}
</style>